import React from 'react';
import './login.less';
import { Form, Input, Button } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import logo from '../../assets/image/logo.png';
const Item = Form.Item;

class Login extends React.Component {
	onFinish = (e) => {
		console.log(e);
	};
	render() {
		return (
			<div className="login">
				<header className="login-header">
					<img src={logo} alt="logo" />
					<h1>React 项目: 后台管理系统</h1>
				</header>
				<section className="login-content">
					<h3>用户登录</h3>
					{/* 经 Form.useForm() 创建的 form 控制实例，不提供时会自动创建
                        name 表单名称，会作为表单字段 id 前缀使用
                        onFinish  提交表单且数据验证成功后回调事件
                        onFinishFailed 提交表单且数据验证失败后回调事件 */}
					<Form onFinish={this.onFinish} className="login-form">
						<Item
							name="username"
							rules={[
								{ required: true, message: '请输入用户名' },
								{ min: 4, message: '不得少于四位' },
								{ max: 12, message: '不得大于12位' },
								{
									pattern: /^[a-zA-Z0-9_]+$/,
									message: '只能数字和英文下划线',
								},
							]}
						>
							<Input
								placeholder="请输入用户名"
								prefix={
									<UserOutlined
										style={{ color: 'rgba(0,0,0,.25)' }}
									/>
								}
							></Input>
						</Item>
						<Item name='password' rules={[
								{ required: true, message: '请输入用户名' },
								{ min: 4, message: '不得少于四位' },
								{ max: 12, message: '不得大于12位' },
								{
									pattern: /^[a-zA-Z0-9_]+$/,
									message: '只能数字和英文下划线',
								},
							]}>
							<Input
								prefix={
									<LockOutlined
										style={{ color: 'rgba(0,0,0,.25)' }}
									/>
								}
								type="password"
								placeholder="密码"
							></Input>
						</Item>
						<Item>
							<Button
								type="primary"
								htmlType="submit"
								className="login-button"
							>
								登录
							</Button>
						</Item>
					</Form>
				</section>
			</div>
		);
	}
}
export default Login;
